<template>
    <div class="RecentBox">
        <div class="RecentEvents">
            <div class="re_Title">
                <div style="display: flex;align-items: center">
                    <div class="xian_box"></div>
                    <span class="s_til_l_t" style="margin-left: .1rem">{{ msg.deviceName }}</span>
                </div>

                <div class="re_close" @click.stop="emit('Pop', 1)">
                    <img src="../../../static/images/tuichu.png" alt=""
                        style="width: .3rem;height: .3rem;margin: .1rem">
                </div>
            </div>
            <div class="re_msg">
                <img src="../../../static/icon/jinqishijian.svg" alt="">
                <span style="margin: 0 .16rem 0 .08rem;" class="span1">近期事件</span>
                <span class="span2">{{ msg.length }}</span>
            </div>
            <div class="re_list">
                <div class="re_birds" v-if="msg[0].status == '鸟类声纹'" v-for="notice in msg" :key="notice.id">
                    <div class="s_til">
                        <div class="s_til_l">
                            <img class="s_til_l_m" :src="filtrations(notice.noticeType, notice.noticeLevel)" alt="">
                            <span class="s_til_l_t">{{ notice.title }}</span>
                            <span class="s_til_l_t" style="color: #3CEDFF;">{{ notice.bizTag }}</span>
                        </div>
                        <div>
                            <span class="span1">{{ notice.occurTime | moment }}</span>
                        </div>
                    </div>
                    <!-- <audio :src="usrs + parseContent(notice.bizContent).videoUrl" controls
                        style="width: 100%;height: .54rem;"></audio> -->
                    <audio :src="usrs + notice.bizContent.videoUrl" controls
                        style="width: 100%;height: .54rem;"></audio>
                    <div class="s_lont">
                        <img src="../../../static/icon/location.svg" style="margin-right: .08rem;" alt="">
                        <span class="span1">{{ notice.lon }}，</span><span class="span1">{{ notice.lat }}</span>
                    </div>
                </div>
                <div class="re_jkl" v-if="msg[0].status == '鸟类详情'" v-for="i in msg" :key="i.id">
                    <div class="re_jkl_l" v-if="i.noticeType == 1">
                        <el-image style="width: 100%; height: 100%;"
                            v-if="i.bizContent.attachments.length > 0"
                            :src="i.bizContent.attachments[0].attachmentUri" :zoom-rate="1.2"
                            :preview-src-list="filtrationImg(i.bizContent)" :initial-index="4"
                            fit="cover" />
                    </div>
                    <div class="re_jkl_l" v-else>
                        <video style="width: 100%;height: 100%;"
                            :src="i.bizContent.discernPath == null ? i.bizContent.videoUrl : i.bizContent.discernPath"
                            controls></video>
                    </div>
                    <div class="re_jkl_r">
                        <div class="re_jkl_r_til">
                            <div class="s_til_l">
                                <img class="s_til_l_m" :src="filtrations(i.noticeType, i.noticeLevel)" alt="">
                                <span class="s_til_l_t">{{ i.title }}</span>
                            </div>
                            <div>
                                <span class="span1">{{ i.occurTime | moment }}</span>
                            </div>
                        </div>
                        <div class="re_cedf" style="height: .63rem;overflow: hidden;">
                            {{ i.bizTag }}
                        </div>
                        <div class="s_lont" style="margin-bottom: 0;">
                            <img src="../../../static/icon/location.svg" style="margin-right: .08rem;" alt="">
                            <span class="span1">{{ i.lon }}</span>，<span class="span1">{{ i.lat }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import s1 from '../../../static/icon/s1.svg'
import s2 from '../../../static/icon/s2.svg'
import s3 from '../../../static/icon/s3.svg'
import s4 from '../../../static/icon/s4.svg'
import s5 from '../../../static/icon/s5.svg'
import location from '../../../static/icon/location.svg'
export default {
    props: {
        msg: {
            type: Array,
            default: () => ({})
        }
    },
    data() {
        return {
            usrs:'http://223.71.254.174:1087/'
        }
    },
    methods: {
        emit(event, value) {
            this.$emit(event, value);
        },
        parseContent(content) {
            return JSON.parse(content);
        },
        filtration(obj) {
            let data = obj.attachments;
            let img = [];

            data.forEach(e => {
                img.push(e.attachmentUri)
            })

            return img
        },
        filtrations(noticeType, noticeLevel) {
            let icon = ''
            if (noticeType == 2) {
                if (noticeLevel == 22) {
                    icon = s1
                }
                if (noticeLevel == 21) {
                    icon = s3
                }
            }
            if (noticeType == 1 || noticeType == 0) {
                if (noticeLevel == 13) {
                    icon = s2
                }
                if (noticeLevel == 12) {
                    icon = s4
                }
                if (noticeLevel == 11) {
                    icon = s5
                }
            }
            return icon
        }
    },
    filters: {
        moment: function (date) {
            return moment(date).format('YYYY-MM-DD hh:mm:ss');
        }
    }
}
</script>
<style scoped>
.RecentBox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.RecentEvents {
    width: 12rem;
    height: 8rem;
    /* background: rgba(5, 37, 72, 0.70); */
    /* box-shadow: 0px 0px 30px 0px rgba(67, 181, 246, 1) inset; */
    overflow: hidden;
    background-color: #002e2c;
}

.re_Title {
    width: 100%;
    height: .5rem;
    position: relative;
    padding-left: .24rem;
    display: flex;
    align-items: center;
    font-size: .26rem;
    font-family: biaoti;
    /* background-image: url('../../assets/ico/dingbu.svg'); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.xian_box {
    width: .04rem;
    height: .3rem;
    background-color: #2efff2;
    /* padding-left: 10px; */
}

.span2 {
    color: #F93C3C;
    font-size: 26px;
    font-family: biaoti;
}

.re_close {
    position: absolute;
    top: -.02rem;
    right: 0;
    z-index: 2;
    cursor: pointer;
}

.re_msg {
    width: 100%;
    height: .8rem;
    padding-left: .24rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    /* background: rgba(67, 181, 246, 0.10); */
    box-shadow: inset 0px 0px .3rem rgba(46, 255, 242, 0.6);
}

.re_list {
    width: 100%;
    padding: 0 .32rem;
    height: calc(100% - 1.4rem);
    overflow-x: hidden;
    overflow-y: auto;

}


/* Webkit浏览器（Chrome、Safari等） */
.re_list::-webkit-scrollbar {
    width: .03rem;
}

.re_list::-webkit-scrollbar-thumb {
    background-color: rgba(186, 230, 255, 0.8);
}

.re_list::-webkit-scrollbar-track {
    background-color: rgba(186, 230, 255, 0.2);
}

/* Firefox浏览器 */
.re_list::-moz-scrollbar {
    width: .03rem;
}

.re_list::-moz-scrollbar-thumb {
    background-color: rgba(186, 230, 255, 0.8);
}

.re_list::-moz-scrollbar-track {
    background-color: rgba(186, 230, 255, 0.2);
}

/* IE浏览器 */
.re_list::-ms-scrollbar {
    width: .03rem;
}

.re_list::-ms-scrollbar-thumb {
    background-color: rgba(186, 230, 255, 0.8);
}

.re_list::-ms-scrollbar-track {
    background-color: rgba(186, 230, 255, 0.2);
}

.re_birds {
    border-bottom: 1px dashed rgba(230, 247, 255, 0.50);
    overflow: hidden;
}

.s_til {
    width: 100%;
    height: .74rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s_til_l {
    height: 100%;
    display: flex;
    align-items: center;
}

.s_til_l_m {
    width: .34rem;
    height: .34rem;
    margin-right: .08rem;
}

.s_til_l_t {
    margin-right: .24rem;
    font-size: .26rem;
    font-family: biaoti;
    color: #fff;
}

.s_lont {
    margin-top: .16rem;
    margin-bottom: .24rem;
    display: flex;
    align-items: center;
}

.re_cedf {
    color: #3CEDFF;
}

.re_jkl {
    display: flex;
    padding: .24rem 0;
    border-bottom: 1px dashed rgba(230, 247, 255, 0.50);
    overflow: hidden;
}

.re_jkl_l {
    width: 2rem;
    height: 1.5rem;
}


.re_jz_l {
    width: 2rem;
    height: 1.5rem;
    text-align: center;
    /* background: rgba(67, 181, 246, 0.10); */
    box-shadow: 0px 0px 30px 0px rgba(67, 181, 246, 0.60) inset;
}

.re_jkl_r {
    width: calc(100% - 2rem);
    padding-left: .24rem;
}

.re_jkl_r_til {
    width: 100%;
    margin-bottom: .16rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.re_jz_l_t {
    width: 100%;
    color: #3CEDFF;
    font-size: .12rem;
    margin-top: .05rem;
    overflow: hidden;
}

.span1 {
    color: #fff;
    font-size: .16rem;
}
</style>